<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
	</head>
	<body>
		<button id="addNewObserver">Add New Observer checkbox</button>
		<input id="mainCheckbox" type="checkbox" />
		<div id="observersContainer"></div>
	</body>
</html>
<script src="js/observer.js"></script>
<script>
var controlCheckbox = document.getElementById("mainCheckbox"),
	addBtn = document.getElementById("addNewObserver"),
	container = document.getElementById("observersContainer");
	extend(new Subject(),controlCheckbox);
	controlCheckbox["onclick"] = function(){
		var checked = controlCheckbox.checked;
		controlCheckbox.Notify(checked);
	}
	addBtn["onclick"] = AddNewObserver;
	function AddNewObserver(){
		var check = document.createElement("input");
		check.type = "checkbox";
		extend(new Observer(),check);
		check.Update = function(value,index) {
			if(index%2 == 0){
				this.checked = value;
			}else{
				this.checked = !value;
			}
			
		};
		controlCheckbox.AddObserver(check);
		container.appendChild(check);
	}
</script>